﻿@{
    var element = ViewData["Element"].ToString();
    var imgPath = ViewData["ImagePath"].ToString();
    var appUrl = WebSiteContext.Current.ApplicationPath;
    imgPath = appUrl + imgPath;
    var prefix = ViewData["Prefix"].ToString();
    var updateScripts = "var _st=$(\"" + element + "\").attr(\"style\"); if (_st) _st=_st.replace(/\"/g,\"\"); $(\"#CssText" + prefix + "\").val(_st);";
}
<input type="hidden" class="d-current-element" value="@element"/>
<div style="background-color: #ffffff; color: #000000; padding: 5px; font-weight: normal;
    overflow: visible;">
    <fieldset class="ui-corner-all">
        <legend>@Html.Global("RES_BG_IMAGE")</legend>
        @(Ajax.Dna().ImageFileListBox(prefix + "PageBackgroundImageListBox", Url.Action("GetFiles", "WebFiles", new { Area = "", url = imgPath }), "POST")
                .Options(opts =>
                {
                    opts.IsInlineMode = true;
                    opts.OnItemSelected = "var __b=\"url(\"+ui.value+\")\";$(\"" + element + "\").css({\"background-image\":__b});" + updateScripts;
                })
                .HtmlAttributes(new { style = "border:none;height:100px;width:535px;" })
                .GetHtml()
            )
    </fieldset>
    <table cellpadding="2">
        <tr>
            <td>
                @(
 Ajax.Dna().Button("btnClearBackground")
                .ChangeType(ButtonTypes.ImageButton)
                        .Click("$(\"" + element + "\").css(\"background-image\",\"none\");" + updateScripts)
                .Images(Url.Content("~/content/images/icon_clear.png"))
                .GetHtml()
                )
            </td>
            <td>
                @Html.Global("RES_CLEARBG")
            </td>
        </tr>
    </table>
    <fieldset class="ui-corner-all">
        <legend>@Html.Global("RES_BACKGROUND")</legend>
        <table style="margin-top: 5px;" cellpadding="5">
            <tr>
                <td>
                    @Html.Global("RES_COLOR"):
                </td>
                <td>
                    @(Ajax.Dna().ColorPicker("PageBackColor" + prefix)
                                .Options(opts =>
                                {
                                    opts.AllowInput = true;
                                    opts.DropDown = true;
                                    opts.OnColorSelected = "$(\"" + element + "\").css(\"background-color\", ui.value);" + updateScripts;
                                }).GetHtml()
                                )
                </td>
                <td>@Html.Global("RES_OPACITY"):</td>
                <td style="width: 100px;">
                    @( Ajax.Dna().Slider("OpacitySlider" + prefix)
                               .FillTextTo("elementOpacity")
                                       .Options(opts => { opts.OnSliding = "$(\"" + element + "\").css({\"opacity\": ui.value / 100 , \"filter\": \"Alpha(Opacity=\" + ui.value + \")\" });" + updateScripts; })
                               .Value(100).GetHtml())
                </td>
                <td id="elementOpacity">
                    100
                </td>
                <td>
                    @Html.Global("RES_BG_REPEAT"):
                </td>
                <td>
                    @(
 Ajax.Dna().ComboBox("RepeatCombo" + prefix)
                            .Width(80)
                            .DropDownStyle(DropdownStyles.DropdownList)
                                    .Options(opts => { opts.OnItemSelected = "$(\"" + element + "\").css(\"background-repeat\", ui.value);" + updateScripts; })
                            .Select("inherit")
                            .Bind(new string[] { "inherit", "no-repeat", "repeat", "repeat-x", "repeat-y" })
                           .GetHtml()
                    )
                </td>
            </tr>
        </table>
    </fieldset>
    <fieldset class="ui-corner-all">
        <legend>@Html.Global("RES_FONT_STYLE")</legend>
        <table style="margin-top: 5px;" cellpadding="5">
            <tr>
                <td>
                    @Html.Global("RES_COLOR"):
                </td>
                <td>
                    @(Ajax.Dna().ColorPicker("FontColorPicker" + prefix)
                                .Options(opts =>
                                {
                                    opts.AllowInput = true;
                                    opts.DropDown = true;
                                    opts.OnColorSelected = "$(\"" + element + "\").css(\"color\", ui.value);" + updateScripts;
                                })
                                .GetHtml()
                        )
                </td>
                <td>
                    @Html.Global("RES_FONT_FAMILY"):
                </td>
                <td colspan="3">
                    @(   Ajax.Dna().ComboBox("FamilyCombo" + prefix)
                                .Width(220)
                                .DropDownStyle(DropdownStyles.DropdownList)
                                                .Options(opts => { opts.OnItemSelected = "$(\"" + element + "\").css(\"font-family\", ui.value);" + updateScripts; })
                                .Select("inherit")
                                .Bind(new string[] { "inherit", 
                                    "Arial", 
                                    "Courier New,Courier,monospace",
                                    "Georgia,serif", 
                                    "Impact,Charcoal,sans-serif",
                                    "Lucida Console,Monaco,monospace",
                                    "Tahoma,Geneva,sans-serif",
                                    "Times New Roman,Times,serif",
                                    "Trebuchet MS,Helvetica,sans-serif",
                                    "Verdana,Geneva,sans-serif"
                                }).GetHtml()
                                )
                </td>
            </tr>
            <tr>
                <td>
                    @Html.Global("RES_WEIGHT"):
                </td>
                <td>
                    @(
 Ajax.Dna().ComboBox("FontWeightCombo" + prefix)
                            .DropDownStyle(DropdownStyles.DropdownList)
                                    .Options(opts => { opts.OnItemSelected = "$(\"" + element + "\").css(\"font-weight\",ui.value);" + updateScripts; })
                            .Select("inherit")
                            .Width(80)
                           .Bind(new string[] { "lighter", "normal", "bold", "bolder", "100", "200", "300", "400", "500", "600", "700", "800", "900", "inherit" })
                           .GetHtml()
                        )
                </td>
                <td>
                    @Html.Global("RES_ALIGN"):
                </td>
                <td>
                    @(
 Ajax.Dna().ComboBox("TextAlignCombo" + prefix)
                            .DropDownStyle(DropdownStyles.DropdownList)
                                    .Options(opts => { opts.OnItemSelected = "$(\"" + element + "\").css(\"text-align\", ui.value);" + updateScripts; })
                            .Select("inherit")
                            .Width(80)
                            .Bind(new string[] { "center", "justify", "left", "right", "inherit" })
                            .GetHtml()
                       )
                </td>
                <td>
                 @Html.Global("RES_SIZE"):
                </td>
                <td style="width: 100px;">
                    @( Ajax.Dna().Slider("FontSizeSlider" + prefix)
                                        .Options(opts => { opts.OnSliding = "$(\"" + element + "\").css(\"font-size\", ui.value);" + updateScripts; })
                                        .FillTextTo("fontSizeText" + prefix)
                                .Value(0)
                                .Maximum(60)
                                .GetHtml()
                    )
                </td>
                <td>
                    <span id="@( "fontSizeText" + prefix)"></span>pt
                </td>
            </tr>
        </table>
    </fieldset>
    <fieldset class="ui-corner-all">
        <legend>@Html.Global("RES_SIZE")</legend>
        <table style="margin-top: 5px;" cellpadding="5">
            <tr>
                <td>
                    @Html.Global("RES_HEIGHT"):
                </td>
                <td style="width: 200px;">
                    @( Ajax.Dna().Slider("HeightSlider" + prefix)
                                                .Options(opts => { opts.OnSliding = "$(\"" + element + "\").height(ui.value);" + updateScripts; })
                                                .FillTextTo("heightValue" + prefix)
                                        .Maximum(1600)
                                        .Value(0).GetHtml()
                                        )
                </td>
                <td id="@( "heightValue" + prefix)">
                </td>
                <td>
                    px
                </td>
            </tr>
        </table>
    </fieldset>
    <fieldset class="ui-corner-all">
        <legend>Css text</legend>
        @using (Html.BeginForm("ApplyStyle", "Widget", new RouteValueDictionary(new
{
    Area = "",
    section = ViewData["Section"].ToString(),
    wid = ViewData["WID"].ToString()
})))
        {
            @Ajax.Dna().TextArea().Width(520).Name("CssText" + prefix).AddClass("d-csstext-value").GetHtml()
            Html.RegisterStartupScript(updateScripts);
        }
    </fieldset>
</div>
@Html.StartupScripts()
